<template>
  <bs-dialog v-model="visible" :title="title" :width="800">
    <div class="dialog-content">
      <!--表单项-->
      <bs-form :model="formData" :grid="1" :label-width="90">
        <bs-form-item label="规则">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="优先级">
          <el-input-number v-model="formData.a"></el-input-number>
        </bs-form-item>
        <bs-form-item label="运算符">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="用户组">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="通知媒介">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="告警等级">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <bs-form-item label="告警标签">
          <bs-input v-model="formData.a"></bs-input>
        </bs-form-item>
        <!--匹配规则-->
      </bs-form>
      <div class="table-op">
        <el-button type="primary">新增匹配规则</el-button>
      </div>
      <BsTable class="table" ref="tableRef" :columns="columns" :data="tableData" :show-page="false"></BsTable>
    </div>
  </bs-dialog>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import BsTable from '@/components/table/BsTable.vue'

const tableRef = ref()
const title = '告警规则'
const visible = ref()
const formData = ref<Record<string, any>>({})
const info = ref()
const tableData = ref<any[]>([])

const columns:ColumnItem[]  = [
  {
    label: '优先序号',
    prop: 'name',
    width: 80
  },
  {
    label: '匹配字段',
    prop: 'name',
    width: 120
  },
  {
    label: '匹配条件',
    prop: 'name',
    width: 120
  },
  {
    label: '匹配模式',
    prop: 'name',
    width: 120
  },
  {
    label: '匹配值',
    prop: 'name',
    minWidth: 120
  },
  {
    label: '操作',
    prop: 'name',
    width: 80
  }
]

const open = (item: any) => {
  visible.value = true
  info.value = item
}

defineExpose({
  open
})

</script>
<style lang="scss" scoped>
.content-text {
  line-height: 1.5;
}
.table {
  margin-top: 16px;
}
.flex-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  .input {
    width: calc(50% - 8px);
  }
}
</style>